<template>
  <div class="realtime panel">
    <ul class="data-group">
      <li class="group">
        <div>当日{{ typeName }}{{ typeAction }}次数</div>
        <p>{{ type == 'service' ? infoData?.daySvcInvokeNum ?? '-' : infoData?.dayEvtInvokeNum ?? '-'  }}</p>
      </li>
      <li class="group">
        <div>近一小时{{ typeName }}{{ typeAction }}次数</div>
        <p>{{ type == 'service' ? infoData?.hourSvcInvokeNum ?? '-'  : infoData?.hourEvtInvokeNum ?? '-'  }}</p>
      </li>
    </ul>
    <header class="title">
      <b />
      <span>{{ typeName }}实时{{ typeAction }}情况</span>
    </header>
    <main>
      <nav>
        <div class="state">{{ typeName }}名称</div>
        <div class="date">{{ typeAction }}时间</div>
        <div class="content">{{ typeAction }}状态</div>
      </nav>
      <ul v-infinite-scroll="getListData" :infinite-scroll-disabled="query.current >= Math.floor(query.total / query.size)"
        v-show="listData.length > 0" ref="listRef" class="list" style="overflow: auto">
        <li v-for="(item, index) in listData" :key="item.id" class="list-item">
          <div class="state" :class="index > 2 ? '' : 'top'">{{ type == 'service' ? item.svcName : item.evtName }}</div>
          <div class="date">{{ parseTime(item.requestTime) }}</div>
          <div class="content">{{ item.httpStatus == 200 ? '成功' : '失败' }}</div>
        </li>
      </ul>
      <div class="no-data" v-if="listData.length == 0">
        暂无数据
      </div>
    </main>
  </div>
</template>

<script>
import { ref, reactive, watch, nextTick, onMounted, computed, onBeforeUnmount } from 'vue'
import { getSvcInvoke, getEvtInvoke } from '@/api/statistics'
import { parseTime } from '@/utils'

export default {
  name: 'RealTime',
  props: {
    type: {
      type: String,
      default: 'service'
    },
    code: { //地图code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    },
    counts: {
      type: Object,
      default: () => { }
    }
  },
  setup(props) {
    const listData = ref([])
    const infoData = computed(() => {
      return props.counts
    })
    const query = reactive({
      current: 1,
      size: 20,
      total: 0
    })
    const typeName = computed(() => {
      return props.type == 'service' ? '服务' : '事件'
    })
    const typeAction = computed(() => {
      return props.type == 'service' ? '调用' : '推送'
    })

    // 获取表格数据
    const getListData = async () => {
      const para = { areaCode: props.code, ...query }
      const res = props.type == 'service' ? await getSvcInvoke(para) : await getEvtInvoke(para)
      if (res.status === 200) {
        if (res.data.list.length === 0) {
          currentScroll.value = 0
        }

        listData.value = [...listData.value, ...res.data.list]
        query.current = res.data.current + 1
        query.total = res.data.total
      }
    }
    const listRef = ref(null)
    const currentScroll = ref(0)
    const handleScroll = () => {
      listRef.value.scrollTo(0, 50 * currentScroll.value)
    }
    const timer = ref(null)
    watch(() => props.code, () => {

      init()
    });
    watch(() => props.refresh, () => {
      init()
    });
    onBeforeUnmount(() => {
      clearInterval(timer.value)
      timer.value = null
    })
    const init = async () => {
      clearInterval(timer.value)
      timer.value = null
      currentScroll.value = 0
      listRef.value.scrollTo(0, 0)
      listData.value = []
      query.current = 1
      getListData()
      timer.value = setInterval(() => {
        currentScroll.value += 1
        handleScroll()
      }, 3000)
    }
    onMounted(() => {
      // init()

    })
    return {
      query,
      infoData,
      listRef,
      listData,
      parseTime,
      typeName,
      typeAction,
      getListData
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>